<template>
    <div>
        
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="grey" 
        text-color="white" >
            <el-menu-item index="0">
                <img style="width: 150px height=auto" src="https://ts1.cn.mm.bing.net/th/id/R-C.1a8315ecba566cefcfc5aab12a78695c?rik=T9yxuViymcRfAA&riu=http%3a%2f%2fimg.sj33.cn%2fuploads%2fallimg%2f201607%2f235944E52-22.jpg&ehk=MtAkdPvZRgwFYOyPP95DGfD6UQrGa%2b1Ay%2b8Fkrf3pLo%3d&risl=&pid=ImgRaw&r=0" alt="Element logo" height="59px"/>
            </el-menu-item>
            <el-menu-item index="1"><router-link to="/">首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to="/cart">购物车</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to="/order">订单</router-link></el-menu-item>
            <el-menu-item index="4">关于</el-menu-item>
            <div class="flex-grow" />
            <el-menu-item index="5">{{ name }},欢迎你</el-menu-item>
            <el-menu-item index="6" v-if="name=='游客'"><router-link to="/Login">登录/注册</router-link></el-menu-item>
            <el-menu-item index="7" v-else @click="goBack()">退出</el-menu-item>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref ,onMounted } from 'vue'
//路由导入进来
import router from '../router'
const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const name= ref('游客')
onMounted(() => {
    if(sessionStorage.getItem('username')==null){
        name.value = '游客'
    }else{
         name.value =sessionStorage.getItem('username')
    }
   
})
const goBack = ()=>{
    name.value='游客'
    sessionStorage.setItem('username','游客')
}
</script>
<style>
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none;
}
.flex-grow {
  flex-grow: 1;
}
.box1{
    background:linear-gradient(to right,#333399,#ff00cc)
}

</style>